<template>
  <div style="padding: 20px">
    <h4>密码设置</h4>
    <el-steps align-center :active="active">
      <el-step title="身份验证" />
      <el-step title="修改密码" />
      <el-step title="完成" />
    </el-steps>
    <div>
      <!-- 身份验证 -->
      <div v-if="divVisible1" class="div">
        <h5 style="color: red">* 为了保证您的账号安全，操作前请先验证身份</h5>
        <div style="margin-top: 10px">请输入邮箱号：<el-input v-model="email"></el-input></div>
      </div>
      <!-- 修改密码 -->
      <div v-if="divVisible2" class="div">
        <div class="div2">
          <div class="div3">当前密码：</div><el-input placeholder="密码长度6到18位，包含数字和字母" v-model="oldPsw" type="password"></el-input>
        </div>
        <div class="div2">
          <div class="div3">新密码：</div>
          <el-input placeholder="新密码和当前密码不能相同" v-model="newPsw1" type="password"></el-input>
        </div>
        <div class="div2">
          <div class="div3">确认密码：</div>
          <el-input placeholder="确认密码和新密码保持一致" v-model="newPsw2" type="password"></el-input>
        </div>
      </div>
      <!-- 完成 -->
      <div v-if="divVisible3">
        <el-result icon="success" title="修改成功！"></el-result>
      </div>
      <div style="text-align: center;margin-top: 10px">
        <el-button @click="next" type="primary">{{ button }}</el-button>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {recruiterApi} from "../../api/app.js";

const recruiterEmail = ref('');
const recruiterPsw = ref('');
const recruiterId = ref('');
onMounted(() => {
  recruiterEmail.value = JSON.parse(localStorage.getItem('recruiter')).email;
  recruiterPsw.value = JSON.parse(localStorage.getItem('recruiter')).password;
  recruiterId.value = JSON.parse(localStorage.getItem('recruiter')).id;
})

const divVisible1 = ref(true);
const divVisible2 = ref(false);
const divVisible3 = ref(false);
const button = ref('下一步');
const active = ref(0);
const email = ref('');
const oldPsw = ref();
const newPsw1 = ref();
const newPsw2 = ref();
const reg_password = /^(?=.*\d)(?=.*[A-z])[\da-zA-Z]{6,18}$/; // 密码正则（包含数字和字母 6~18位）
const next = () => {
  if(active.value == 0) {
    if(email.value === recruiterEmail.value) {
      divVisible1.value = false;
      divVisible2.value = true;
      active.value ++;
    } else {
      ElMessage({ type: 'error', message: '邮箱错误！' });
    }
  } else if(active.value == 1) {
    if(oldPsw.value == '' || newPsw1.value == '' || newPsw2.value == '') {
      ElMessage({ type: 'error', message: '输入不得为空！' });
    } else if(newPsw1.value != newPsw2.value) {
      ElMessage({ type: 'error', message: '新密码两次不一致！' });
    } else if(recruiterPsw.value != oldPsw.value) {
      ElMessage({ type: 'error', message: '当前密码错误！' });
    } else if(oldPsw.value == newPsw1.value){
      ElMessage({ type: 'error', message: '新密码与旧密码不得一致！' });
    } else if(!reg_password.test(newPsw1.value)) {
      ElMessage({ type: 'error', message: '新密码格式错误！' });
    } else {
      recruiterApi.changeRecruiterById({
        id: recruiterId.value,
        password: newPsw1.value
      }).then(response => {
        console.log(response);
        divVisible2.value = false;
        divVisible3.value = true;
        button.value = '完成';
        active.value ++;
      }).catch(error => {
        console.log(error);
      })
    }
  } else {
    ElMessage({ type: 'success', message: '修改成功！' });
    active.value = 0;
    divVisible1.value = true;
    divVisible3.value = false;
    email.value = '';
    button.value = '下一步';
    recruiterApi.getRecruiterById({
      id: recruiterId.value
    }).then(response => {
      // 存为全局变量
      localStorage.setItem(
          'recruiter',
          JSON.stringify(response.data)
      );
    }).catch(error => {
      console.log(error);
    })
  }
}
</script>

<style scoped>
.el-steps {
  margin-top: 20px;
}
.div {
  margin-left: 50px;
  margin-top: 20px;
}
.el-input {
  width: 300px;
}
.div2 {
  display: flex;
  margin-bottom: 10px;
}
.div3 {
  width: 80px;
}
</style>